<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1511597_39i1ncoape7.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    .wrap{
      width: 400px;
      box-sizing: border-box;
      border: 1px solid #222;
      overflow: hidden;
      position: absolute;
    }
    header{
      width: 90%;
      padding:0 5%;
      height: 40px;
      background: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 900;
    }
    .SMS{
      height: 40px;
      border-top: 1px solid #333;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      box-sizing: border-box;

    }
    .SMSBtn{
      border-top: 1px solid #333;
      width: 100%;
      overflow: hidden;
    }
    .SMSBtn .box{
      overflow: hidden;
      width: 100%;
      border-bottom: 1px solid #333;
      margin: 10px auto;
      box-sizing: border-box;

    }
    .SMSBtn .box textarea{
      width: 100%;
      min-height: 150px;
      box-sizing: border-box;
      resize:none;
      border: none;
      outline: none;
      padding: 5px;
      /* border: none; */
      /* outline: none;       */
    }
    .SMSBtn .box p{
      float: right;
      line-height: 30px;
      font-size: 13px;
      padding-right: 10px;
    }
    .bottom{
      height: 50px;
      width: 100%;
      padding: 0 5px;
    }
    .bottom span:nth-of-type(1){
      width: 70%;
      float: left;
      font-size: 14px;
    }
    .bottom span:nth-of-type(2){
      float: right;
      width: 100px;
      height: 40px;
      background: #f40;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      color: #fff;
      border-radius: 5px;
      font-size: 16px;
      margin-right: 15px;
    }
    section{
      overflow-y: scroll;
      height: 400px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
    }
    /* section::-webkit-scrollbar {display:none} */
    .sec-cms{
      width: 80%;
      float: right;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .sec-cms p{
      float: right;
      margin-bottom: 5px;
    }
    .sec-cms p span:nth-of-type(1){
      margin-right: 20px;
    }
    .cmsContent{
      font-size: 14px;
      clear: both;
      width: 100%;
      background: #ccc;
      padding: 10px 0;
    }
    .name{
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
    }
  </style>
</head>
<body>
    <div class="wrap">
       <header>
         <div class="header-Left">短信记录(138****8000)<i class="iconfont icon-duanxin" style="padding-left:10px;"></i></div>
         <i class="header-Right iconfont icon-cross-fill"></i>
       </header>
       <section id="wrap"></section>
       <footer>
         <p class="SMS" >发送短信<i class="iconfont icon-ico_arrows_unfold" style="padding-left:10px"></i></p>
         <div class="SMSBtn" style="display:none">
           <div class="box">
             <textarea maxlength="300"></textarea>
             <p>限300字</p>
           </div>
           <div class="bottom">
             <span>
                *1分钟内，最多可向同一个客户发送一条短信；否则不可发送
             </span>
             <span>发送</span>
           </div>
          </div>
       </footer>
    </div>
    <script>
      $(()=>{
        $('.SMS').click(function(){
          $(this).css({"display":"none"})
          $('.SMSBtn').css({"display":"block"})
        })
        // 调用接口
        $.ajax({
            url: './index.json',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
              if(data.status == 1){
                for(let i=0;i<data.data.dataList.length;i++){
                  $('section').append(`
                    <div class="sec-cms" style="${data.data.dataList[i].type == 'a' ? 'float:right' :'float:left'}">
                      <p style="${data.data.dataList[i].type == 'a' ? 'float:right' :'float:left'}"><span>${data.data.dataList[i].date}${data.data.dataList[i].type}</span><span>${data.data.dataList[i].name}</span></p>
                      <div class="cmsContent">${data.data.dataList[i].CMS}</div>
                    </div>
                  `)
                }
                console.log($('section').height(),$('section')[0].scrollHeight)
              // 滚动条到达底部的时候打印
                $('section').scroll(function() {
                  if ($('section').scrollTop()<=0){
                    // alert("滚动条已经到达顶部为0");
                    console.log('滚动条到达顶部')
                  }
                  if ($('section').scrollTop() >= $('section')[0].scrollHeight - $('section').height()) {
                    console.log('滚动条到达底部')
                
                  }
                })
              }
            }
        });
        // 拖拽
        $('.wrap').mousedown(function(e) {
          // e.pageX
          var positionDiv = $(this).offset();
          var distenceX = e.pageX - positionDiv.left;
          var distenceY = e.pageY - positionDiv.top;
          $(document).mousemove(function(e) {
              var x = e.pageX - distenceX;
              var y = e.pageY - distenceY;
              if (x < 0) {
                  x = 0;
              } else if (x > $(document).width() - $('div').outerWidth(true)) {
                  x = $(document).width() - $('div').outerWidth(true);
              }
              if (y < 0) {
                  y = 0;
              } else if (y > $(document).height() - $('div').outerHeight(true)) {
                  y = $(document).height() - $('div').outerHeight(true);
              }
              $('.wrap').css({
                  'left': x + 'px',
                  'top': y + 'px'
              });
          });

          $(document).mouseup(function() {
              $(document).off('mousemove');
          });
      });
      // 点击叉信息消失
      $('.header-Right').click(function(){
        $('.wrap').css({'display':'none'})
      })



    })
    </script>
</body>
</html>